<template>
  <div class="perosonal">
    <div class="perleft">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" prefix-icon="el-icon-user" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.account" prefix-icon="el-icon-notebook-2" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input prefix-icon="el-icon-lock" v-model="form.passWord" disabled></el-input>
        </el-form-item>
        <el-form-item label="签名">
          <el-input prefix-icon="el-icon-edit-outline" v-model="form.signature" disabled></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input prefix-icon="el-icon-edit-outline" v-model="form.date" disabled></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-image style="width: 100px; height: 100px" :src="imageUrl"></el-image>
        </el-form-item>
      </el-form>
    </div>
    <div class="perright">
      <el-button type="primary" @click="visible = true">修改档案</el-button>
    </div>
    <modify-file v-if="visible" @handleFile="handleFile" @close="close"></modify-file>
  </div>
</template>
<script>
import ModifyFile from "./ModifyFile";
import { FindFile, Modify } from "../../api/index";
export default {
  data() {
    return {
      imageUrl: "",
      form: {
        userName: "",
        account: "",
        passWord: "",
        signature: "",
        photo: "",
        date: ""
      },
      visible: false
    };
  },
  components: {
    ModifyFile
  },
  created() {
    this.getUserFile();
  },
  methods: {
    // ModifyFile组件中获取到要修改的数据
    handleFile(data) {
      Modify(data).then(res => {
        if (res.status) {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success"
          });
          this.visible = false;
          this.getUserFile();
          this.$EventBus.$emit("updateUser")
        } else {
          this.$notify.error({
            title: "错误",
            message: res.msg
          });
        }
      });
    },
    close() {
      this.visible = false;
    },
    getUserFile() {
      FindFile().then(res => {
        this.form.userName = res.userName;
        this.form.account = res.account;
        this.form.passWord = res.passWord;
        this.form.signature = res.signature || "这个家伙很懒，没有写签名";
        this.form.date = res.date || "暂无数据";
        this.imageUrl = res.photo || "";
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.perosonal .el-form {
  margin: 0px 100px;
  margin-top: 25px;
}
.perosonal {
  display: flex;
}
.perosonal .perleft {
  width: 80%;
  border: 1px solid rgb(190, 189, 189);
}
.perosonal .perright {
  width: calc(20% - 3px);
  border: 1px solid rgb(190, 189, 189);
  border-left: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>